import { View, Text, Image } from "@tarojs/components";
import emptyContentImg from "./images/empty_content_default.png"
import "./index.scss"

interface EmptyContentProps {
    type?: 'A' | 'B',
    imgUrl?: string,
    text?: string,
    className?: string
}


export default function LgEmptyContent(props: EmptyContentProps) {

    let text = props.text

    if(!text){
        text = "暂无内容"
    }

    switch (props.type) {
        case 'A':
            return (
                <LgEmptyContentTypeA text={text} className={props.className} />
            )
        case 'B':
            return (
                <LgEmptyContentTypeB imgUrl={props.imgUrl ? props.imgUrl : emptyContentImg} text={text} className={props.className} />
            )
        //默认是A款
        default:
            return (
                <LgEmptyContentTypeA text={text} className={props.className} />
            )
    }
}

//A款式
interface EmptyContentTypeAProps {
    text: string,
    className?: string
}

function LgEmptyContentTypeA(props: EmptyContentTypeAProps) {
    return (
        <View className={"empty-content-top " + props.className}>
            <View className="empty-content">
                <Text className="text">{props.text}</Text>
            </View>
        </View>
    )
}

//B款式
interface EmptyContentTypeBProps {
    imgUrl: string
    text: string,
    className?: string
}

function LgEmptyContentTypeB(props: EmptyContentTypeBProps) {

    const classNames = new Array<string>()
    classNames.push("empty-content-top")
    classNames.push("has-img")
    if(props.className){
        classNames.push(props.className)
    }
    const className = classNames.join(" ")
    return (
        <View className={className}>
            <View className="empty-content">
                <Image className="img" src={props.imgUrl} mode="aspectFill" />
                <Text className="text">{props.text}</Text>
            </View>
        </View>
    )
}
